<!-- CityPicker visible属性测试页面 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">CityPicker visible属性测试</text>
    </view>

    <!-- 问题说明 -->
    <view class="bg-red-50 border border-red-200 rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-red-900 mb-4">修复的问题</view>
      <view class="space-y-3 text-[24rpx] text-red-800">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-red-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">问题：CityPicker组件没有弹出选择框</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-red-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">原因：组件内部使用showPopup控制显示，外部无法控制</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-green-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">解决：添加visible属性支持v-model:visible</text>
        </view>
      </view>
    </view>

    <!-- 测试按钮 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">测试CityPicker组件</view>
      
      <view class="flex gap-4 mb-6">
        <nut-button
          type="primary"
          size="large"
          class="flex-1"
          @click="openPicker"
        >
          打开选择器
        </nut-button>
        
        <nut-button
          type="default"
          size="large"
          class="flex-1"
          @click="closePicker"
        >
          关闭选择器
        </nut-button>
      </view>
      
      <view class="p-4 bg-blue-50 rounded-lg">
        <text class="text-[24rpx] text-blue-600">
          当前状态：{{ showPicker ? '已打开' : '已关闭' }}
        </text>
      </view>
    </view>

    <!-- 选择结果 -->
    <view v-if="selectedRegion" class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">选择结果</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex justify-between">
          <text>省份：</text>
          <text class="font-medium text-blue-600">{{ selectedRegion.province?.name || '未选择' }}</text>
        </view>
        <view class="flex justify-between">
          <text>城市：</text>
          <text class="font-medium text-blue-600">{{ selectedRegion.city?.name || '未选择' }}</text>
        </view>
      </view>
    </view>

    <!-- 操作历史 -->
    <view v-if="operationHistory.length > 0" class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">操作历史</view>
      <view class="space-y-3">
        <view 
          v-for="(record, index) in operationHistory" 
          :key="index"
          class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
        >
          <view class="flex items-center">
            <IconFont name="check-circle" class="text-green-600 mr-2" size="24rpx" />
            <text class="text-[24rpx] text-gray-800">{{ record.operation }}</text>
          </view>
          <text class="text-[22rpx] text-gray-500">{{ record.timestamp }}</text>
        </view>
      </view>
    </view>

    <!-- CityPicker组件 -->
    <CityPicker
      v-model:visible="showPicker"
      mode="city"
      placeholder="请选择服务区域"
      title="选择服务区域"
      @confirm="handleRegionConfirm"
      @cancel="handleRegionCancel"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import CityPicker from './CityPicker.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

/**
 * 操作历史类型
 */
interface OperationRecord {
  operation: string
  timestamp: string
}

// 响应式数据
const showPicker = ref(false)
const selectedRegion = ref<SelectionResult | null>(null)
const operationHistory = ref<OperationRecord[]>([])

/**
 * 添加操作记录
 */
const addOperationRecord = (operation: string) => {
  operationHistory.value.unshift({
    operation,
    timestamp: new Date().toLocaleTimeString()
  })
  
  // 只保留最近10条记录
  if (operationHistory.value.length > 10) {
    operationHistory.value = operationHistory.value.slice(0, 10)
  }
}

/**
 * 打开选择器
 */
const openPicker = () => {
  showPicker.value = true
  addOperationRecord('打开CityPicker组件')
}

/**
 * 关闭选择器
 */
const closePicker = () => {
  showPicker.value = false
  addOperationRecord('关闭CityPicker组件')
}

/**
 * 处理区域选择确认
 */
const handleRegionConfirm = (result: SelectionResult) => {
  selectedRegion.value = result
  
  const operationText = result.city 
    ? `确认选择：${result.province?.name} ${result.city.name}`
    : `确认选择：${result.province?.name}`
  
  addOperationRecord(operationText)
  
  Taro.showToast({
    title: operationText,
    icon: 'success'
  })
}

/**
 * 处理区域选择取消
 */
const handleRegionCancel = () => {
  addOperationRecord('取消选择')
  
  Taro.showToast({
    title: '已取消选择',
    icon: 'none'
  })
}
</script>
